<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新青年宠物销售平台</title>



    <link href="style/bootstrap.css" rel="stylesheet">
    <link href="style/gsdk.css" rel="stylesheet">
    <link href="style/demo.css" rel="stylesheet">
    <link href="style/cooriku.css" rel="stylesheet">
    <link href="style/font-awesome.css" rel="stylesheet">
    <link rel="shortcut icon" href="icon.ico" type="image/x-icon">

</head>
<body style="">




<div id="navbar-full">
    <div class="container">
        <nav class="navbar navbar-ct-blue navbar-fixed-top navbar-transparent" role="navigation">

            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#">
                        <div class="logo-container">
                            <div class="logo">
                                <img src="img/logo-top1.png">
                            </div>
                            <div class="brand">
                                新青年宠物店
                            </div>
                        </div>
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">搜索宠物 <b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/moredogs}">搜索狗狗</a></li>
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/morecats}">搜索猫咪</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">宠物词典<b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/Havedogs}">狗狗的饲养方法</a></li>
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/Havecats}">猫咪的饲养方法</a></li>
                            </ul>
                        </li>
                        <!-- 登录和注册按钮 -->
                        <li class="nav-item" th:if="${username == null}">
                            <button style="color: #4e498f;" name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" th:onclick="|window.location.href='@{/login}'|">登录</button>
                        </li>
                        <li class="nav-item" th:if="${username == null}">
                            <button style="color: #4e498f;" name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" th:onclick="|window.location.href='@{/zhuce}'|">注册</button>
                        </li>

                        <!-- 欢迎信息和退出登录按钮 -->
                        <li class="nav-item" th:if="${username != null}">
                            <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">欢迎您尊贵的<span th:text="${username}" class="nav-link nav-link dropdown-toggle" style="color: blue;"></span>新青年宠物店VIP贵宾，点我修改个人信息!<b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a class="dropdown-item"  style="color: blue" th:href="@{/upUser}">修改个人资料</a></li>
                                <li><a class="dropdown-item"  style="color: blue" th:href="@{/myLove}">我的喜爱</a></li>
                                <li><a class="dropdown-item"  style="color: blue" th:href="@{/userSubscribe}">我的预约</a></li>
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/quituser}">退出登录</a></li>

                            </ul>
                        </li>
                    </ul>
                </div>


            </div>
        </nav>
    </div><!--  end container-->

    <div class="blurred-container">
        <div class="motto">
            <div>We</div>
            <div class="border">Love</div>
            <div>Pet</div>
        </div>

        <div class="img-src" style="background-image: url('img/service/top-service.jpg')"></div>
        <div class="img-src blur" style="background-image: url(img/service/top-service.jpg); opacity: 0;"></div>
    </div>
</div>
<div class="main">
    <nav>
        <ol itemscope="" itemtype="https://schema.org/BreadcrumbList" class="breadcrumb">
            <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <a itemprop="item" th:href="@{/index}">
                    <span itemprop="name">首页</span>
                </a>
                <meta itemprop="position" content="1">
            </li>
            <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="active">
                <span itemprop="name">我的喜爱</span>
                <meta itemprop="position" content="2">
            </li>
        </ol>
    </nav>

    <div class="coo-title">
        <h1 class="coo-hd-tittle">我的喜爱</h1>
    </div>
    <hr>
    <div class="container mb-2">
        <p class="coo-text-brown text-right">现在有 <strong class="coo-text-orange" th:text="${countPets}">9个</strong> 喜爱。</p>

    </div>
    <div class="container tim-container">
        <p class="coo-text-brown">喜欢的猫猫就不准取消了哟，买回家也一样不要让小动物没有家！！！！！</p>
        <div class="space-30"></div>

        <!-- Dogs -->
        <div class="row">
            <h1 class="coo-hd-tittle">喜欢的狗狗</h1>
            <div th:each="dog : ${loveDogs}" class="col-md-3">
                <div class="thumbnail">
                    <img th:src="@{${dog.imagePath}}" >
                    <div class="caption">
                        <span th:classappend="${dog.sub ? 'label-danger' : 'label-success'}" class="label">[[${dog.sub ? '已预约' : '未预约'}]]</span>
                        <h5 class="coo-text-green text-center" th:text="${dog.name}">巴哥</h5>
                        <p class="coo-text-lightbrown">
                            【查询号码】<span th:text="${dog.query_number}">331</span><br>
                            【性别】<span th:text="${dog.gender}">男</span><br>
                            【生日】<span th:text="${#dates.format(dog.birthday, 'yyyy-MM-dd')}">2023-07-19</span><br>
                            【价格】<span th:text="${dog.price}">2688.0</span>
                        </p>
                        <button name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search"
                                th:onclick="'javascript:window.location.href=\'' + @{/dogsDetails} + '?petdetail=' + ${dog.queryNumber} + '\''">点击详情 »</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- Cats -->
        <div class="row">
            <h1 class="coo-hd-tittle">喜欢的猫猫</h1>
            <div th:each="cat : ${loveCats}" class="col-md-3">
                <div class="thumbnail">
                    <img th:src="@{${cat.imagePath}}">
                    <div class="caption">
                        <span th:classappend="${cat.sub ? 'label-danger' : 'label-success'}" class="label">[[${cat.sub ? '已预约' : '未预约'}]]</span>
                        <h5 class="coo-text-green text-center" th:text="${cat.name}">巴哥</h5>
                        <p class="coo-text-lightbrown">
                            【查询号码】<span th:text="${cat.query_number}">331</span><br>
                            【性别】<span th:text="${cat.gender}">男</span><br>
                            【生日】<span th:text="${#dates.format(cat.birthday, 'yyyy-MM-dd')}">2023-07-19</span><br>
                            【价格】<span th:text="${cat.price}">2688.0</span>
                        </p>
                        <button name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search"
                                th:onclick="'javascript:window.location.href=\'' + @{/catsDetails} + '?petdetail=' + ${cat.queryNumber} + '\''">点击详情 »</button>
                    </div>
                </div>
            </div>
        </div>


    </div>


</div>




<div class="parallax-pro">
    <div class="img-src" style="background-image: url('img/image-dogrun2.jpg');"></div>
    <div class="container"><div class="row"><div class="col-md-6 text-center">
        <h3><small>跳转到新青年宠物店媒体官方：</small></h3>
        <p>
            <small>
            </small></p><ul class="list-unstyled"><small>
        <li><a href="https://space.bilibili.com/456611364?spm_id_from=333.1007.0.0" target="_brank">Ai喵咪皇帝</a></li>
        <li><a href="https://space.bilibili.com/456611364?spm_id_from=333.1007.0.0" data-toggle="modal" data-target="#wechatModal">哔哩哔哩</a></li>
        <li><a href="https://space.bilibili.com/456611364?spm_id_from=333.1007.0.0" data-toggle="modal" data-target="#wechatModal">哔哩哔哩</a></li>
        <li><a href="https://space.bilibili.com/456611364?spm_id_from=333.1007.0.0" data-toggle="modal" data-target="#wechatModal">哔哩哔哩</a></li>
    </small></ul><small>
    </small>
        <p></p>
    </div><div class="col-md-6 text-center">
        <h3><small>软件工程项目实践课</small></h3>
        <p>
            <small>
            </small></p><ul class="list-unstyled"><small>
        <li>尊师：田广强</li>
        <li>css样式采用：bootstrap</li>
        <li>图片素材由百度图片提供</li>
        <li>已经将该项目投放gitee，欢迎wink!!!~~~</li>
    </small></ul><small>
    </small>
        <p></p>
    </div></div>
        <div class="space-30"></div><div class="row">

        </div><div class="row">
            <div class="col-md-12 text-center">
                <div class="credits">
                    洪树军和赵纬的大作业新青年宠物销售平台
                </div>
            </div>
        </div></div>
    <!--<audio autoplay loop>
       <source src="mp3/song.mp3" type="audio/mpeg">
        您的浏览器不支持 HTML5 audio 标签。
    </audio>-->
</div>
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/gsdk-bootstrapswitch.js"></script>
<script src="js/get-shit-done.js"></script>
<script src="js/custom.js"></script>

</body></html>